<template>
  <div class="address-append-bar">
    <div v-show="edit == false">
      <div class="append-tag" @click="edit_clicked">+</div>
    </div>
    <div v-show="edit"><input type="text" placeholder="请填写收货人姓名" class="addr_text hand gray"><input type="text"
        placeholder="请填写收货人手机号码" class="addr_text hand gray mt-10">
      <div class="mt-10 flex justify-between item-center">
        <select class="address_select hand">
          <option>北京市</option>
          <option>天津市</option>
          <option>河北省</option>
          <option>山西省</option>
          <option>内蒙古自治区</option>
          <option>辽宁省</option>
          <option>吉林省</option>
          <option>黑龙江省</option>
          <option>上海市</option>
          <option>江苏省</option>
          <option>浙江省</option>
          <option>安徽省</option>
          <option>福建省</option>
          <option>江西省</option>
          <option>山东省</option>
          <option>河南省</option>
          <option>湖北省</option>
          <option>湖南省</option>
          <option>广东省</option>
          <option>广西壮族自治区</option>
          <option>海南省</option>
          <option>重庆市</option>
          <option>四川省</option>
          <option>贵州省</option>
          <option>云南省</option>
          <option>西藏自治区</option>
          <option>陕西省</option>
          <option>甘肃省</option>
          <option>青海省</option>
          <option>宁夏回族自治区</option>
          <option>新疆维吾尔自治区</option>
          <option>新疆建设兵团</option>
        </select>
        <select class="address_select hand">
          <option>东城区</option>
          <option>西城区</option>
          <option>朝阳区</option>
          <option>丰台区</option>
          <option>石景山区</option>
          <option>海淀区</option>
          <option>门头沟区</option>
          <option>房山区</option>
          <option>通州区</option>
          <option>顺义区</option>
          <option>昌平区</option>
          <option>大兴区</option>
          <option>怀柔区</option>
          <option>平谷区</option>
          <option>密云县</option>
          <option>延庆县</option>
        </select>
        <select class="address_select hand"></select>
      </div><input type="text" placeholder="请填写收获详细地址" class="addr_text hand gray mt-10">
      <div class="mt-20 flex justify-end item-center"><button class="address-btn btn-save hand rounded"> 保 存
        </button><button class="address-btn btn-cancel hand rounded ml-20"> 取 消 </button></div>
    </div>
  </div>

</template>

<script>
  import {
    mapActions,
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        edit: false,
        //市
        city_list: [],
        //区
        district_list: []
      }
    },
    computed: {
      ...mapState(['address'])
    },
    methods: {
      get_city_list(){
        
      },
      edit_clicked() {
        this.edit = true
        this.get_city_list()
      }
    }
  }
</script>

<style scoped="scoped">
  .address-bar.active {
    box-shadow: 0px 0px 10px #c33;
  }

  .address-bar {
    width: 516px;
    margin: 20px;
    padding: 20px;
    border: 2px dashed transparent;
    border-radius: 6px;
    box-shadow: 0px 0px 10px #eee;
  }

  .address-append-bar {
    width: 516px;
    margin: 20px;
    padding: 20px;
    border: 0px dashed transparent;
    border-radius: 6px;
    box-shadow: 0px 0px 10px #eee;
    cursor: pointer;
  }

  .addr_text {
    width: 476px;
    outline: none;
    padding: 9px 20px;
    border: 1px solid #ddd;
  }

  .append-tag {
    width: 300px;
    padding: 0px 54px;
    margin: 23px 53px;
    border: 1px dashed #eee;
    font-size: 64px;
    font-weight: 900;
  }
</style>
